开发一个导出功能，将echarts图表导出到excel文件中

最新推荐文章于 2024-08-01 12:43:01 发布

一缕茶香思绪万堵

最新推荐文章于 2024-08-01 12:43:01 发布

阅读量3.8k

点赞数

分类专栏： java POI I/O流文章标签： excel poi

本文链接：https://blog.csdn.net/baidu_27996063/article/details/107332196

版权

本文档介绍了如何将ECharts图表导出到Excel文件中。首先，由于ECharts自身导出功能不满足需求，因此需要先将图表转换为图片，然后在后端将这些图片插入到Excel中。前端通过点击按钮触发事件，获取图表的Base64编码，并发送到后端。后端接收到图片数据，解码并保存为图片文件，最后生成Excel文件并将图片插入到相应位置。整个流程包括前端的图片数据获取和发送，以及后端的图片处理和Excel生成。

摘要由CSDN通过智能技术生成

首先，做这个功能开发时，首先有几点必须弄清楚：1、echarts图表导出时该怎样导出到excel中，2、有没有图表自带的导出功能可用。经过我上网查阅相关资料以及去echarts官网查看API后，发现图表自带的导出功能不符合当前的业务需要，echarts图表导出必需转成图片，然后再将图片保存到excel中。

开始，我写的导出过程：（步骤一）前端js导出按钮事件：

$('#export').jqxButton({width: 50, height: 27,template: "primary" }).on('click',function(){
       $("#imgUrl").val("");//清空
       imgUrl = myChart1.getDataURL({type:"png",backgroundColor:"#fff"});
       imgUrl+="#";
       imgUrl+= myChart2.getDataURL({type:"png",backgroundColor:"#fff"});
       imgUrl+="#";
       imgUrl+= myChart3.getDataURL({type:"png",backgroundColor:"#fff"});

       var actionUrl = currentSystemRootPath+pifx+"/exportExcelData.json";
       $("#imgUrl").val(imgUrl);
       var form = $("<form>");
$('body').append(form);
form.attr('style','display:none');
form.attr('target','');
form.attr('method','post');
form.attr('action', actionUrl);//下载文件的请求路径

//对应查询
var input1 = $('<input>');
input1.attr('type','hidden');
input1.attr('name','imgUrl');
input1.attr('value',$("#imgUrl").val());
form.append(input1)